<template>
    <div class="holeContainer">
        <div class="holeContent">
            <ul class="holes">
                <li v-for="hole in holes" :key="hole.id">
                    <div class="hole">
                        <div class="infoContent">
                            <div class="head"></div>
                            <div class="info">
                                <p class="name">匿名{{ hole.id }}</p>
                                <p class="time">16分钟前</p>
                            </div>
                        </div>
                        <div class="more">...</div>
                        <p class="say">{{ hole.content }}</p>
                        <div class="other">
                            <input type="text" class="express" placeholder="发表我的意见">
                            <div class="numContent">
                                <div class="numImg"></div>
                                <p class="num">{{ hole.comment }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        name:'forumHole',
        data(){
            return{
                holes:[
                    {id:1,say:'这里是树洞区',num:3},
                    {id:2,say:'这里是树洞区',num:3},
                    {id:3,say:'这里是树洞区',num:3},
                    {id:4,say:'这里是树洞区',num:3},
                ]
            }
        },
        async beforeRouteEnter(to,from,next){
            await next((vm)=>{
                axios({
                    url:'http://localhost:8080/polycystic/treeHoles/list',
                    method:'get',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                }).then(res=>{
                    vm.holes=res.data.data
                })
            })
        },
        mounted(){
            axios({
                url:'http://localhost:8080/polycystic/treeHoles/list',
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                this.holes=res.data.data
            })
        }
    }
</script>

<style scoped>
    .holeContainer{
        width: 100%;
        overflow-y:scroll;
        scrollbar-width: none; 
    }
    .holeContent{
        width: 100%;
        margin-top: .2rem;
        padding-bottom: 100px;
    }
    .hole{
        background-color: #FFF;
        width: 100%;
        height: 2.7rem;
        margin-bottom: .2rem;
        overflow: hidden;
        position: relative;
    }
    .infoContent{
        display: flex;
        align-items: center;
        margin-left: .3rem;
        margin-top: .1rem;
    }
    .head{
        width: .9rem;
        height: .9rem;
        background-color: #F6F8FA;
        border-radius: 50%;
        margin-right: .2rem;
    }
    .name{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .time{
        font-family: 'PingFangSC-Regular';
        color:#33333375;
        font-size: .24rem;
        margin-top: .1rem;
    }
    .more{
        font-family: 'PingFangSC-Mediuem';
        position: absolute;
        top:0;
        right: .3rem;
    }
    .say{
        margin-left: .3rem;
        margin-top: .2rem;
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .34rem;
    }
    .other{
        display: flex;
        align-items: center;
    }
    .express{
        margin-left: .3rem;
        width: 70%;
        height: .7rem;
        border-radius: .7rem;
        margin-top: .1rem;
        border: 0.02rem solid #F6F8FA;
        background-color: #F6F8FA;
        text-indent:.3rem;
    }
    .express::placeholder{
        font-family: 'PingFangSC-Regular';
        color: #33333377;
    }
    .numImg{
        width: .4rem;
        height: .4rem;
        background-image: url(../assets/img/tab+logo@2x/message.png);
        background-position: center;
        background-size: contain;
    }
    .numContent{
        margin-left: .4rem;
        display: flex;
        align-items: center;
    }
    .num{
        font-family: 'PingFangSC-Regular';
        margin-left: .1rem;
        color:#33333386;
    }
</style>